<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/views/modules/woms/front/include/import-tags.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="telephone=no" name="format-detection" />
    <title>工单分派</title>
    <link href="${ctxStatic}/css/main.css" rel="stylesheet" type="text/css">
    <link href="${ctxStatic}/css/style.css" rel="stylesheet" type="text/css">
    <link href="${ctxStatic}/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="${ctxStatic}/css/animate.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="${ctxStatic}/js/jquery-1.8.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/layer-v2.3/layer/layer.js"></script>
    <script type="text/javascript" src="${ctxStatic}/js/wo.js"></script>
</head>


<body>
<div class="warpe">
    <div class="head">
        选择外场运维人员
        <a href="#" class="return icon-chevron-left"></a>
    </div>
    <div class="userbtn">
        <div class="user_t">已选择外场运维人员</div>
        <div class="user_m">
            <ul id="selectIds">

            </ul>
        </div>
    </div>
    <div class="userbtn">
        <div class="user_t">全部外场运维人员</div>
        <div class="user_m">
            <ul id="unselectIds">
                <c:forEach items="${engineers}" var="user">
                    <li id="unselect${user.id}">
                        <a onclick="selectEngineer('${user.id}','${user.name}','${user.headImg}')">
                            <img src="${user.headImg}" alt=""/>
                            <p>${user.name}</p>
                        </a>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>
    <div class="main">
        <div class="work_bth">
            <a  onclick="assign();">确认指派</a>
        </div>
    </div>
</div>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
    var url=location.href.split('#')[0];
    var result =false;
    $.ajax({
        type : "POST",
        url : "${ctx}/assigner/jsApi?t="+Date.parse(new Date()),
        cache : false,
        dataType : "json",
        async: false,
        data:{url:url},
        success : function(data) {
            result= true;
            if(data.success){
                result = JSON.parse(data.msg);
                init();

            }

        }
    });

    function init(){
        if(result && wx){
            wx.config({
                debug: false,
                appId:  'wx3a0b5ce9478e1365',
                timestamp: result['timestamp'],
                nonceStr: result['nonceStr'],
                signature: result['signature'],
                jsApiList: [
                    'checkJsApi',
                    'chooseImage',
                    'uploadImage'
                ]
            });
            wx.ready(function () {
                layer.close(loading);
            });
            wx.error(function (res) {
                alert('wx.error: '+JSON.stringify(res));
            });
        }else{
            setTimeout(function(){
                init();
            },1000)
        }
    }



    //选中工程师事件
    function selectEngineer(id,name,headImg){
        $("#unselect"+id).remove();//清
        $('#selectIds').append('<li id="selected'+id+'"><a onclick=delEngineer("'+id+'","'+name+'","'+headImg+'")><img src="'+headImg+'" alt=""/> <p>'+name+'</p> </a> </li>');

    }
    //取消选中工程师事件
    function delEngineer(id,name,headImg){//选中后的工程师，又去掉
        $("#selected"+id).remove();//清理
        $('#unselectIds').append('<li id="unselect'+id+'"><a onclick=selectEngineer("'+id+'","'+name+'","'+headImg+'")><img src="'+headImg+'" alt=""/> <p>'+name+'</p> </a> </li>');

    }

    function assign(){
        var eventId = '${event.id}';
        var selectIds = $('#selectIds li');
        var  engineerArr = [];
        $.each(selectIds,function(i){
            engineerArr.push($(selectIds[i]).attr('id').replace(/selected/g,''));
        });
        if(engineerArr.length==0){
            layer.msg('请先选择工程师');
            return;
        }
        layer.confirm('确认要指派吗？',{
                btn: ['确认','取消']
            }
            , function(index){//用户点击了确认按钮
                layer.close(index);
                $.ajax({
                    url: '${ctx}/assigner/assign',
                    type: "POST",
                    data: {'id': eventId, 'engineerArr[]': engineerArr},
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            $(".work_bth").hide();
                            layer.alert('派单成功!', {icon: 6}, function (index) {
                                layer.close(index);
                                wx.closeWindow();
                            });
                        } else {
                            layer.alert(data.msg);
                        }

                    }
                });
            }, function(index){//用户点击了取消
                layer.close(index);
            });
    }


</script>
</body>
</html>
